<template>
  <div class="hello">
    <mt-swipe :auto="4000">
      <mt-swipe-item>1</mt-swipe-item>
      <mt-swipe-item>2</mt-swipe-item>
      <mt-swipe-item>3</mt-swipe-item>
    </mt-swipe>
    <mt-button @click.native="handleClick" type="primary" size="large">新增</mt-button>
    
    <!-- 已有活动列表 -->
    <mt-loadmore ref="loadmore">
      <ul>
        <li class="event-item" v-for="item in list" @click="go(item.id)">{{ item.title }}</li>
      </ul>
    </mt-loadmore>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: ['a', 'b', 'c', 'd'],
    };
  },
  methods: {
    handleClick: function() {
      // this.$toast({ message: 'Hello world!', iconClass: 'icon icon-success' });
      this.$router.push({ path: '/event' });
    },
    go(target) {
      console.log(target);
      this.$router.push({
        path: '/' + target + '/enroll',
      });
    },
  },
  mounted() {
    // const that = this;
    // that.$http.get('/v2/movie/in_theaters').then(resp => {
    //   // console.log(JSON.stringify(resp));
    //   that.list = resp.data.subjects;
    // });

    const that = this;
    that.$http.get(that.$const.ctx + '/api/event/list').then(resp => {
      that.list = resp.data;
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon-success {
}
.event-item {
  border-top: 1px solid #e3e3e3;
  font-size: 16px;
  line-height: 2;
  padding: 5px 15px;
}
</style>
